<div class="page-header d-print-none">
  <div class="container-xl">
    <!-- 帖子Id -->
    <input type="text" style="display: none;" id="details_article_id">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- 帖子标题 -->
        <h2 class="page-title" id="details_article_title"></h2>
      </div>
    </div>
    <div class="col-auto d-none d-md-inline" style="padding: 0px 3px;">
      <ul class="list-inline list-inline-dots mb-0">
        <li class="list-inline-item">
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-building-castle"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 19v-2a3 3 0 0 0 -6 0v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-14h4v3h3v-3h4v3h3v-3h4v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" /><path d="M3 11l18 0" /></svg>
          <span id="details_board_name"></span>
        </li>
        <li class="list-inline-item">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"
            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
            stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
            <path d="M12 7v5l2 2"></path>
            <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
          </svg>
          <!-- 发布时间 -->
          <span id="details_article_createTime"></span>
        </li>
        <li class="list-inline-item">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"
              viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
              stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
              <path d="M12 7v5l2 2"></path>
              <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
            </svg>
            <!-- 帖子状态 -->
            <span id="details_article_state"></span>
          </li>
      </ul>
    </div>
  </div>
</div>
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <div class="row">
        <!-- 作者区 -->
        <div class="col-3 card">
          <div class="card-body p-4 text-center">
            <span class="avatar avatar-xl mb-3 rounded" style="background-image: url(./image/avatar01.jpeg)"
              id="article_details_author_avatar"></span>
            <h3 class="m-0 mb-1"><a href="javascript:void(0);" id="article_details_author_name"></a></h3>
            <div style="margin-top: 10px;" id="div_details_btn" style="display: none;">
              <a href="javascript:void(0);" class="btn btn-primary" id="btn_details_send_message" data-bs-toggle="modal" data-bs-target="#index_message_modal">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24"
                  viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                  stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z">
                  </path>
                  <path d="M3 7l9 6l9 -6"></path>
                </svg>
                发私信
              </a>
            </div>
          </div>
        </div>
        <div class="col-9 card card-lg">
          <!-- 帖子正文 -->
          <div class="card-body">
            <h1 id="details_article_content_title"></h1>
            <div id="details_article_content"></div>
          </div>
          <!-- 卡片页脚 -->
          <div class="card-footer bg-transparent mt-auto justify-content-end"
            style="display: flex; justify-content: space-between; align-items: center;">
            <!-- 操作区开始 -->
            <div class="col-auto row g-2 align-items-center">
              <div class="col-auto" style="display: none;" id="btn_pass">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-success w-100">
                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>
                    <span>审核通过</span>
                  </a>
                </div>
              </div>

              <div class="col-auto" style="display: none;" id="btn_fail">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-toggle="modal" data-bs-target="#examine_fail">
                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
                    <span>审核不通过</span>
                  </a>
                </div>
              </div>

              <div class="col-auto details-is-own" style="display: none;">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-tabler w-100" id="details_artile_edit">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                      <path d="M16 5l3 3"></path>
                    </svg>
                    <span>编辑</span>
                  </a>
                </div>
              </div>

              <div class="col-auto details-is-own" style="display: none;">
                <div class="col-6 col-sm-4 col-md-2 col-xl-auto py-3">
                  <a href="javascript:void(0);" class="btn btn-outline-danger w-100" data-bs-toggle="modal" data-bs-target="#details_delete_modal">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M4 7l16 0"></path>
                      <path d="M10 11l0 6"></path>
                      <path d="M14 11l0 6"></path>
                      <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                      <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                    </svg>
                    <span>删除</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="details_delete_modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-danger"></div>
      <div class="modal-body text-center py-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
        <h3>确定要删除当前帖子吗?</h3>
        <div class="text-muted">点击删除该帖子将被删除.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
                取消
              </a></div>
            <div class="col"><a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-dismiss="modal" id="details_artile_delete">
                删除
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="examine_fail" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">审核不通过</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-12">
            <div>
              <label class="form-label">请输入审核不通过的理由: </label>
              <textarea class="form-control" rows="5" id="examine_fail_reason"></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:void(0);" class="btn me-auto" data-bs-dismiss="modal">
          取消
        </a>
        <a href="javascript:void(0);" class="btn btn-primary ms-auto" data-bs-dismiss="modal" id="examine_fail_send">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M10 14l11 -11"></path>
            <path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"></path>
         </svg>
          确定
        </a>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    // 获取帖子详情
    $.ajax({
      type: 'get',
      url: '/article/getAllState?id=' + currentArticle.id,
      success: function(respData) {
        if (respData.code == 0) {
          initArticleDetails(respData.data);
        } else {
          // 提示失败信息
          $.toast({
            heading: '警告',
            text: respData.message,
            icon: 'warning'
          });
        }
      },
      error: function() {
        // HTTP 请求错误
        $.toast({
          heading: '错误',
          text: '访问出现问题，请与管理员联系.',
          icon: 'error'
        });
      }
    });

    // 初始化页面
    function initArticleDetails(article) {
      // 设置当前操作的帖子为最新查询出来的值
      currentArticle = article;
      // 默认头像路径
      if (!article.user.avatarUrl) {
        article.user.avatarUrl = avatarUrl;
      }
      // 设置头像
      $('#article_details_author_avatar').css('background-image', 'url(' + article.user.avatarUrl + ')');
      // 设置用户名
      $('#article_details_author_name').html(article.user.nickname);
      // 设置帖子Id
      $('#details_article_id').val(article.id);
      // 设置帖子标题
      $('#details_article_title').html(article.title);

      $('#details_board_name').html(article.board.name);
      // 设置发布时间
      $('#details_article_createTime').html(article.createTime);
      // 设置帖子正文
      $('#details_article_content_title').html(article.title);
      // 设置帖子状态

      let stateEL = $('#details_article_state');
      if (article.state == 1) {
        stateEL.html('审核中');
        stateEL.css('color', 'green');
      } else if (article.state == 2) {
        stateEL.html('未通过审核，请修改不规范的内容');
        stateEL.css('color', 'red');
      }

      // 让内容以markdown 的形式显示
      editormd.markdownToHTML('details_article_content', { markdown: article.content });
      // 判断是否要显示编辑和删除按钮
      if (article.user.id == currentUserId) {
        $('.details-is-own').show();
      }

      // 按钮
      if (article.user.id != currentUserId) {
        $('#div_details_btn').show();
        // 设置站内信目标用户信息
        $('#btn_details_send_message').click(function() {
          setMessageReceiveUserInfo(article.user.id, article.user.nickname);
        });
      }

      // 审核按钮
      if ($('#index_nav_name_sub').html() == '管理员' && currentArticle.state == 1) {
        $('#btn_pass').show();
        $('#btn_fail').show();
      }

      // 个人帖子列表
      $('#article_details_author_name').click(function () {
          // 设置要查看用户的Id
          profileUserId = article.userId;
          // 是否为当前登录用户
          if (article.userId == currentUserId) {
            profileUserId = undefined;
          }
          $('#forum-content').load('profile.html');
      });
    }

    // ====================== 处理删除事件 ======================
    $('#details_artile_delete').click(function () {
      $.ajax({
        type: 'post',
        url: '/article/delete?id=' + $('#details_article_id').val(),
        success: function(respData) {
          if (respData.code == 0) {
            $.toast({
              heading: '成功',
              text: '删除成功',
              icon: 'success'
            });
            profileUserId = currentUserId;
            $('#forum-content').load('profile.html');
          } else {
            // 提示错误信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '访问出现问题，请与管理员联系.',
            icon: 'error'
          });
        }
      });

    });

    // ====================== 处理编辑事件 ======================
    $('#details_artile_edit').click(function () {
      $('#forum-content').load('article_edit.html');
    });

    // ====================== 审核不通过事件 ======================
    $('#btn_fail').click(function() {
      $('#examine_fail_reason').html('');
    });

    $('#examine_fail_send').click(function() {
      let reasonEl = $('#examine_fail_reason');
      if (!reasonEl.val()) {
        $.toast({
          heading: '警告',
          text: '请输入理由！',
          icon: 'warning'
        });
        // 输入框
        reasonEl.focus();
        return;        
      }

      // 构造发送数据
      let postData = {
        id: $('#details_article_id').val(),
        reason: reasonEl.val()
      };

      $.ajax({
        type: 'post',
        url: '/article/fail',
        data: postData,
        success: function(respData) {
          if (respData.code == 0) {
            $('#forum-content').load('examine_article_list.html');
          } else {
            // 提示错误信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '出错了.',
            icon: 'error'
          });
        }
      });
    })

    // ====================== 通过审核事件 ======================
    $('#btn_pass').click(function() {
      $.ajax({
        type: 'post',
        url: '/article/pass?id=' + $('#details_article_id').val(),
        success: function(respData) {
          if (respData.code == 0) {
            $('#forum-content').load('examine_article_list.html');
          } else {
            // 提示错误信息
            $.toast({
              heading: '警告',
              text: respData.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
          // HTTP 请求错误
          $.toast({
            heading: '错误',
            text: '出错了.',
            icon: 'error'
          });
        }
      });
    });
  })
</script>